'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { FiPlus, FiLogOut, FiUser, FiBarChart2 } from 'react-icons/fi';
import { Button } from '@/components/ui/Button';
import { PlanCard } from '@/components/plans/PlanCard';
import { PlanForm } from '@/components/forms/PlanForm';
import { PlanStats } from '@/components/plans/PlanStats';
import { useStore } from '@/lib/hooks/useStore';
import { v4 as uuidv4 } from 'uuid';

export default function Dashboard() {
  const { currentUser, plans, setCurrentUser, setPlans } = useStore();
  const [showAddForm, setShowAddForm] = useState(false);
  const [showStats, setShowStats] = useState(false);

  // 模拟用户登录
  useEffect(() => {
    if (!currentUser) {
      const mockUser = {
        id: uuidv4(),
        name: '测试用户',
        email: 'test@example.com',
      };
      setCurrentUser(mockUser);
    }
  }, [currentUser, setCurrentUser]);

  // 过滤计划，按照创建时间排序，未完成的在前面
  const sortedPlans = [...plans].sort((a, b) => {
    if (a.isCompleted === b.isCompleted) {
      return new Date(b.startDate).getTime() - new Date(a.startDate).getTime();
    }
    return a.isCompleted ? 1 : -1;
  });

  const handleLogout = () => {
    if (window.confirm('确定要退出吗?')) {
      setCurrentUser(null);
      setPlans([]);
      window.location.href = '/';
    }
  };

  if (!currentUser) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h1 className="text-2xl font-semibold mb-4">请先登录</h1>
          <Link
            href="/"
            className="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
          >
            返回首页
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 顶部导航栏 */}
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-600">每日计划</h1>
          <div className="flex items-center space-x-4">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2">
                <FiUser />
              </div>
              <span className="font-medium">{currentUser.name}</span>
            </div>
            <Button variant="outline" size="sm" onClick={handleLogout}>
              <FiLogOut className="mr-2 h-4 w-4" /> 退出
            </Button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 操作栏 */}
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-800">我的计划</h2>
          <div className="flex space-x-2">
            <Button 
              variant={showStats ? 'primary' : 'outline'} 
              onClick={() => setShowStats(!showStats)}
            >
              <FiBarChart2 className="mr-2 h-4 w-4" /> 
              {showStats ? '隐藏统计' : '查看统计'}
            </Button>
            <Button 
              variant="primary" 
              onClick={() => setShowAddForm(!showAddForm)}
            >
              <FiPlus className="mr-2 h-4 w-4" /> 
              {showAddForm ? '取消' : '新增计划'}
            </Button>
          </div>
        </div>

        {/* 统计图表 */}
        {showStats && (
          <div className="mb-6">
            <PlanStats />
          </div>
        )}

        {/* 新增计划表单 */}
        {showAddForm && (
          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 className="text-lg font-semibold mb-4">创建新计划</h3>
            <PlanForm onSuccess={() => setShowAddForm(false)} />
          </div>
        )}

        {/* 计划列表 */}
        <div className="space-y-4">
          {sortedPlans.length === 0 ? (
            <div className="bg-white rounded-lg shadow-md p-8 text-center">
              <h3 className="text-lg font-medium text-gray-500 mb-2">
                您还没有创建任何计划
              </h3>
              <p className="text-gray-400 mb-4">
                点击"新增计划"按钮开始创建您的第一个计划
              </p>
              <Button 
                variant="primary" 
                onClick={() => setShowAddForm(true)}
              >
                <FiPlus className="mr-2 h-4 w-4" /> 创建第一个计划
              </Button>
            </div>
          ) : (
            sortedPlans.map((plan) => (
              <PlanCard key={plan.id} plan={plan} />
            ))
          )}
        </div>
      </main>
    </div>
  );
} 